Zendeskのお問い合わせフォームのデザインをカスタマイズする方法
こんにちは、ゲームソリューショングループの入井です。
Zendeskには、お客様からのお問い合わせを受け付けるためのリクエストフォームを作成する機能があります。オリジナルの項目を作成してそれをチケットのデータ構造に反映できる等、様々なカスタマイズ機能がありますが、一方で見た目のデザインを弄ろうとしても柔軟なカスタマイズが可能な設定画面がありません。
ちょっとした手間をかけることでデザインのカスタマイズが可能になりますので、今回はその方法をご紹介していきます。
リクエストフォームの入力欄のHTMLは直接編集できない。
お問い合わせリクエストフォームは、Guideの機能の1つとして提供されています。Guideでは、HTML/CSS/JSを編集することで、各ページのデザインをカスタマイズすることができます。
リクエストフォームのコードは、Guideの管理画面からデザインカスタマイズ→コード編集と入っていき、new_request_page.hbsファイルを開くことで編集が可能です。
しかし、コードの中身をよく見ると、フォームの入力欄部分は以下のように独自のテンプレート式の記載だけになっており、直接その中身を編集することはできないようになっています。
<div id="main-content" class="form">{{request_form wysiwyg=true}}</div>
恐らく、入力欄部分はチケットフォームの設定を元に動的にコードを生成するなどやや複雑な処理が入っている関係上、ユーザが変に触って壊れてしまわないよう表に出さないようにしているのかもしれません。
CSS、JavaScriptを活用して入力欄をカスタマイズする
入力欄のHTMLの編集はできませんが、Guideのコード編集画面では各ページのテンプレートファイルだけでなく、ヘルプセンター画面全体から呼び出されるscript.jsやstyle.cssも編集可能になっています。これらを利用して、HTMLの内容を動的に書き換える形でデザインのカスタマイズが可能です。
以下、カスタマイズの一例をご紹介していきます。
必須項目をCSSで強調する
リクエストフォームには、必須の項目を設定する機能があります。しかし、デフォルトではどの項目が必須なのか見た目ではっきりと分かるようになっていません。フォームの送信を行った後に必須項目に入力が無いというエラーが返るため、機能としては必要なものは足りていますが、送信前にユーザがどの項目が必須か分かったほうが親切だと思います。
style.cssに以下のようなコードを記述することで、必須項目を*マークで強調することができます。
.request-form .required>label:after {
content: "*";
font-weight: bold;
color: #ff0000;
margin-left: 6px;
padding: 0.3em 0.5em;
}
Chromeのdevtoolなどでリクエストフォーム画面を開いてみると分かりますが、必須項目のinputタグを囲むdivタグには、.requiredクラスが付いています。上記のCSSコードはそれを利用して、.requiredクラス下のlabelタグの後ろに 擬似要素afterを使って*マークをつける仕組みになっています。
後はフォームの外側に「*は必須入力項目です」というような説明をつけると、ユーザにとってより親切なデザインになるでしょう。
InputタグのplaceholderをJavaScriptで設定する
各入力欄にplaceholderを使って入力例などをユーザに提示したい場合があるかもしれません。しかし、Zendeskの標準機能ではplaceholderの設定はできません。
JavaScriptを書くことで、各入力欄に個別にplaceholderのテキストをセットできます。
script.js を開くと、以下のようにDOMContentLoadedイベントのリスナーを設定しているコードがあります。
document.addEventListener('DOMContentLoaded', function() {
この中に以下のようなコードを書くと、ページの読み込みと共に指定した入力欄のplaceholderを書き換えることができます。
document.getElementById('request_custom_fields_0000000').placeholder='田中 太郎';
getElementByIdで指定しているrequest_custom_fields_0000000というIDは、各項目に自動的に割り振られているもので、こちらもDevToolsなどを使ってリクエストフォーム画面を確認すると分かります。上記のコードは、それを利用して任意のinputタグのplaceholderにテキストをセットしている形です。
まとめ
CSS、JavaScriptそれぞれでリクエストフォームのデザインをカスタマイズする方法をご紹介しました。これらの方法を応用することで、かなり細かいところまでデザインの調整を行うことが可能になります。
